"use client";

import * as React from "react";
import { Bot, SquareTerminal, Box } from "lucide-react";
import { NavMain } from "@/components/nav-main";
import { NavUser } from "@/components/nav-user";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarRail,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";
import useUserStore from "./state/login_state";
import { ValidLogin } from "./auth/useAuthFunc";

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  ValidLogin();

  const real_name = useUserStore((state) => state.real_name);
  const email = useUserStore((state) => state.email);

  // This is sample data.
  const data = {
    user: {
      name: real_name,
      email: email,
      avatar: "/avatars/shadcn.jpg",
    },
    navMain: [
      {
        title: "数据中心",
        url: "/data/list",
        icon: SquareTerminal,
        isActive: true,
        items: [
          {
            title: "数据列表",
            url: "/data/list",
          },
          {
            title: "数据注册",
            url: "/data/register",
          },
        ],
      },
      {
        title: "工具中心",
        url: "/tool/port",
        icon: Box,
        isActive: true,
        items: [
          {
            title: "端口注册",
            url: "/tool/port",
          },
          {
            title: "系统登记",
            url: "/tool/system",
          },
        ],
      },
      {
        title: "大模型调度",
        url: "/llm/state",
        icon: Bot,
        isActive: true,
        items: [
          {
            title: "调优状态",
            url: "/llm/state",
          },
          {
            title: "调优结果",
            url: "/llm/result",
          },
        ],
      },
    ],
  };
  return (
    <Sidebar collapsible="icon" {...props}>
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" asChild>
              <a href="#" className="border-b border-gray-200 rounded-none p-4">
                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                  {/* <Image
                    src="/images/icon.svg"
                    alt="irlab"
                    width={35}
                    height={35}
                  /> */}
                  <svg
                    className="w-8 h-8"
                    viewBox="0 0 128 128"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <rect width="128" height="128" rx="20" fill="#14532D" />
                    <path
                      d="M59.5 16.5981C62.2846 14.9904 65.7154 14.9904 68.5 16.5981L102.801 36.4019C105.586 38.0096 107.301 40.9808 107.301 44.1962V83.8038C107.301 87.0192 105.586 89.9904 102.801 91.5981L68.5 111.402C65.7154 113.01 62.2846 113.01 59.5 111.402L25.1987 91.5981C22.4141 89.9904 20.6987 87.0192 20.6987 83.8038V44.1962C20.6987 40.9808 22.4141 38.0096 25.1987 36.4019L59.5 16.5981Z"
                      fill="#ECFDF5"
                    />
                    <path
                      d="M60.9249 45.6701C68.1276 45.6701 73.6809 47.4296 77.5846 50.9485C81.4884 54.4124 83.4403 59.3058 83.4403 65.6289C83.4403 72.0619 81.5159 77.0653 77.6671 80.6392C73.8183 84.2131 68.0726 86 60.43 86H47.0692V45.6701H60.9249ZM60.6774 51.9381H53.9145V79.567H61.4197C66.3682 79.567 70.1345 78.4124 72.7187 76.1031C75.3029 73.7388 76.595 70.3024 76.595 65.7938C76.595 56.5567 71.2891 51.9381 60.6774 51.9381Z"
                      fill="#14532D"
                    />
                  </svg>
                </div>
                <div className="grid flex-1 text-left text-sm leading-tight">
                  <span className="truncate font-bold">IrlabTool</span>
                  <span className="truncate text-xs">智能与创新治理研究所</span>
                </div>
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        {data && <NavMain items={data.navMain} />}
      </SidebarContent>
      <SidebarFooter>{data && <NavUser user={data.user} />}</SidebarFooter>
      <SidebarRail />
    </Sidebar>
  );
}
